<template>
  <div class="vol-el-menu">
    <!-- <el-input @input="goPath" placeholder="请输入菜单" class="selectwrap" v-model="value">

    </el-input> -->
    <el-autocomplete v-model="value" class="selectwrap" :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容" @input="goPath"></el-autocomplete>
    <!-- <el-select class="selectwrap" v-model="value" @change="goPath" filterable placeholder="请选择">
      <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select> -->
    <!-- <el-button @click="goPath" plain icon="el-icon-search"></el-button> -->
    <el-menu ref="menu" :default-active="activeId" close="vol-el-menu--vertical"
      :unique-opened="true" @select="select" :collapse="isCollapse" @open="handleOpen"
      @close="handleClose">
      <template v-for="item in treeList">
        <el-submenu :key="item.id" :index="'' + item.id"
          v-if="item.children.length && item.enable == 1">
          <template slot="title">
            <Icon :type="item.icon || 'ios-aperture'" />
            <span slot="title"> {{ item.name}}</span>
          </template>
          <vol-element-menu-child :list="item.children"></vol-element-menu-child>
        </el-submenu>
        <template v-else>
          <el-menu-item class="menu-item-lv1" v-if="item.enable == 1" :key="item.id"
            :index="'' + item.id">
            <Icon :type="item.icon || 'ios-aperture'" />
            <span slot="title"> {{ item.name}}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
import VolElementMenuChild from "./VolElementMenuChild";
export default {
  components: {
    "vol-element-menu-child": VolElementMenuChild,
  },
  props: {
    isCollapse: {
      type: Boolean,
      default: false,
    },
    onSelect: {
      type: Function,
      default: (x) => {
        console.log(x);
      },
    },
    list: {
      type: Array,
      default: [],
    },
    rootId: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      treeList: [],
      activeId: "",
      //默认展开导航栏
      value: "",
      restaurants: [],
      timeout: null,
    };
  },
  created() {
    this.treeList = this.convertTree(this.list);
    // 侧边栏隐藏
    this.treeList = this.treeList.filter(
      (i) => i.id != 384 && i.id != 446 && i.id != 505
    );
  },
  mounted() {
    // this.restaurants = this.loadAll();

    this.restaurants = this.list;
    this.restaurants.forEach((item) => {
      item.value = item.name;
    });
  },
  methods: {
    convertTree(data) {
      var rootId = !isNaN(this.rootId) ? ~~this.rootId : this.rootId;
      var root_data = [];
      data.forEach((x) => {
        if (!x.children) x.children = [];
        if (x.parentId === rootId) {
          x.isRoot = true;
          if (!x.hasOwnProperty("enable")) x.enable = 1;
          root_data.push(x);
          this.getTree(x.id, x, data);
        }
      });
      return root_data;
    },

    goPath() {
      // if (this.value == "") {
      //   this.$message.error("菜单不能为空！");
      // }

      this.getoption();
    },
    querySearchAsync(queryString, cb) {
      var restaurants = this.restaurants;
      restaurants=restaurants.filter((item)=>{
        return  item.url!=""
      })
      var results = queryString
        ? restaurants.filter(this.createStateFilter(queryString))
        : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 300 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (
          state.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        );
      };
    },
    handleSelect(item) {
      console.log(item);
    },
    getoption() {
      let that = this;
      this.list.forEach((item) => {
        if (item.name == this.value) {
          console.log(item.name);
          that.activeId = "" + item.id.toString();
          // this.onSelect(that.activeId, item);
          this.$router.push({
            path: item.url,
          });
        }
      });
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    getTree(id, node, data) {
      data.forEach((x) => {
        if (!x.hidden && x.parentId == id) {
          if (!node.children) node.children = [];
          node.children.push(x);
          this.getTree(x.id, x, data);
        }
      });
    },
    select(index, indexPath) {
      console.log(index);
      let _item = this.list.find((x) => {
        return x.id == index;
      });
      this.onSelect(index, _item);
      this.$router.push({ path: _item.path });
    },

    handleClose() {},
  },
};
</script>
<style scoped>
.vol-el-menu {
  box-sizing: content-box;
  width: 100%;
}
.vol-el-menu >>> .el-menu-item-group__title {
  padding: 0 !important;
}
.vol-el-menu >>> .horizontal-collapse-transition {
  transition: 0s width ease-in-out, 0s padding-left ease-in-out,
    0s padding-right ease-in-out;
}
.selectwrap {
  width: 90%;
  margin: 10px 0px 10px 10px;
}
</style>

